<!--
 * @Author: your name
 * @Date: 2022-01-04 16:44:51
 * @LastEditTime: 2022-01-06 15:37:25
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \am-dashboard\src\pages\government\components\Bottom1.vue
-->
<template>
  <div
    id="bottonContainer"
    style="height: 80px; width: 95%; padding-bottom: 15px"
  >
    <span style="font-size: 20px; color: #f88c24; padding: 10px 10px"
      >柳州市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在线设备：5台</span
    >
    <div class="div1">
      <div class="div2">
        <p style="font-size: 15px; color: #338fcc; padding: 4px 10px">
          空气质量监测一号设备：PM2.5数值超标
        </p>
        <p style="font-size: 15px; color: #338fcc; padding: 4px 10px">
          大气质量监测九号设备：粒子状污染物数值增高
        </p>
        <p style="font-size: 15px; color: #338fcc; padding: 4px 10px">
          水资源质量监测七号设备：排放物监测数值超标
        </p>
        <p style="font-size: 15px; color: #338fcc; padding: 4px 10px">
          土地资源质量监测四号设备：排放物监测数值超标
        </p>
        <p style="font-size: 15px; color: #338fcc; padding: 4px 10px">
          空气质量监测五号设备：PM2.5数值超标
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    //方法
  },
  mounted() {},
};
</script>

<style scoped>
.div1 {
  padding-bottom: 50px;

  width: 350px;

  height: 70px;

  overflow: hidden;

  margin: auto;

  position: relative;

  /* border: 2px solid orange; */
}

@keyframes anis {
  0% {
    transform: translateY(150px);
  }

  50% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-140px);
  }
}

img {
  position: absolute;
}

.div2 {
  animation: anis 5s linear infinite;
}

.div2:hover {
  animation-play-state: paused;
}
</style>